<!-- 
  我的 -> 历史查询
 -->

<template>
  <view class="page-root">
    <uv-tabs
      lineColor="#4F7AFD"
      activeStyle="color: #4F7AFD;"
      inactiveStyle="color: #fff;"
      :scrollable="false"
      :list="tabList"
      @change="handleTabChange"
    ></uv-tabs>

    <!-- 测试记录 -->
    <view class="test-record-wrap" v-if="currentTabIndex === 0">
      <view class="list-item" v-for="(item, index) in testRecordList" :key="index" @click="handleTestRecordSelect(item)">
        <view class="list-name ell1">{{ item.title }}</view>
        <view class="checkbox-wrap" :class="{ checked: testRecordIdList.includes(item.id) }">
          <uv-icon name="checkmark" color="#fff" size="26rpx" v-if="testRecordIdList.includes(item.id)"></uv-icon>
        </view>
      </view>

      <view class="submit-button" @click="handleViewTestRecord">
        <view v-if="lang">View</view>
        <view v-else>查看</view>
      </view>
    </view>

    <!-- 故障记录 -->
    <view v-if="currentTabIndex === 1">
      <view class="list-item" v-for="(item, index) in faultRecordList" :key="index" @click="handleTestRecordSelect(item)">
        <view class="list-name ell1">{{ item.title }}</view>
        <view class="list-date">{{ item.date }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTabIndex: 0, // 0=测试记录 1=故障记录
      lang: 0, // 0=中文 1=英文

      // 测试记录列表
      testRecordList: [
        { id: 1, title: "测试记录1" },
        { id: 2, title: "测试记录2" },
        { id: 3, title: "测试记录3" },
        { id: 4, title: "测试记录4" },
        { id: 5, title: "测试记录5测试记录5测试记录5测试记录5测试记录5测试记录5测试记录5" },
        { id: 6, title: "测试记录6" },
        { id: 7, title: "测试记录7" },
        { id: 8, title: "测试记录8" },
        { id: 9, title: "测试记录9" },
        { id: 10, title: "测试记录10" },
        { id: 11, title: "测试记录11" },
        { id: 12, title: "测试记录12" },
        { id: 13, title: "测试记录13" },
        { id: 14, title: "测试记录14" },
        { id: 15, title: "测试记录15" },
        { id: 16, title: "测试记录16" },
        { id: 17, title: "测试记录17" },
        { id: 18, title: "测试记录18" },
      ],
      testRecordIdList: [], // 测试记录选中的 id

      // 故障记录列表
      faultRecordList: [
        { id: 1, date: "2024-03-14 10:26:33", title: "故障记录1" },
        { id: 2, date: "2024-03-14 10:26:33", title: "故障记录2" },
        { id: 3, date: "2024-03-14 10:26:33", title: "故障记录3" },
        { id: 4, date: "2024-03-14 10:26:33", title: "故障记录4" },
        { id: 5, date: "2024-03-14 10:26:33", title: "故障记录5故障记录5故障记录5故障记录5故障记录5故障记录5故障记录5" },
        { id: 6, date: "2024-03-14 10:26:33", title: "故障记录6" },
        { id: 7, date: "2024-03-14 10:26:33", title: "故障记录7" },
        { id: 8, date: "2024-03-14 10:26:33", title: "故障记录8" },
        { id: 9, date: "2024-03-14 10:26:33", title: "故障记录9" },
        { id: 10, date: "2024-03-14 10:26:33", title: "故障记录10" },
        { id: 11, date: "2024-03-14 10:26:33", title: "故障记录11" },
      ],
    };
  },
  computed: {
    // tab 列表
    tabList() {
      return [{ name: this.lang ? "Test records" : "测试记录" }, { name: this.lang ? "Fault records" : "故障记录" }];
    },
  },
  onShow() {
    this.lang = uni.getStorageSync("lang");
    if (this.lang) {
      uni.setNavigationBarTitle({ title: "Historical query" });
    } else {
      uni.setNavigationBarTitle({ title: "历史查询" });
    }
  },
  methods: {
    // tab 改变
    handleTabChange(event) {
      // console.log(event);
      this.currentTabIndex = event.index;
    },

    // 测试记录选择
    handleTestRecordSelect(item) {
      if (this.testRecordIdList.includes(item.id)) {
        this.testRecordIdList = this.testRecordIdList.filter((id) => id !== item.id);
      } else {
        this.testRecordIdList.push(item.id);
      }
    },
    // 查看测试记录
    handleViewTestRecord() {
      if (!this.testRecordIdList.length) return uni.showToast({ title: "请选择要查看的记录", icon: "none" });

      uni.navigateTo({
        url: `test-record-detail?idList=${this.testRecordIdList.join(",")}`,
      });
    },
  },
};
</script>

<style>
page {
  background: #19253e;
}
</style>

<style lang="scss" scoped>
.page-root {
  padding-bottom: 20rpx;
  color: #fff;
}

.test-record-wrap {
  padding-bottom: 140rpx;
}

.list-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
  margin: 20rpx 30rpx 0;
}
.list-name {
  flex: 1;
}
.checkbox-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  border-radius: 4rpx;
  box-sizing: border-box;
  padding-top: 4rpx;
  box-shadow: inset 0 0 0 2rpx #999;
  margin-left: 20rpx;
  &.checked {
    box-shadow: none;
    background: #4f7afd;
  }
}
.submit-button {
  position: fixed;
  bottom: 30rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 690rpx;
  height: 80rpx;
  background: #4f7afd;
  border-radius: 10rpx;
  font-weight: 600;
  font-size: 32rpx;
  color: #fff;
}

.list-date {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 20rpx;
}
</style>
